<template>
  <view>
    <!-- parse <template is="skeleton" v-if="loading"/> -->


    <view class="page-container">
      <view class="banner-container">
        <image class="banner" :src="staticBaseUrl + '/static/image/coupon_center_banner.png'"></image>
      </view>

      <view class="main-container">
        <view class="title-container">
          <text class="title">省钱券包</text>
          <text>领券线下购物更优惠</text>
        </view>
        <view class="coupon-list" v-if="couponArr && couponArr.length > 0">
          <!-- parse <template is="coupon" :data="couponArr, baseurl"></template> -->
          <block name="coupon">
            <view class="temp-coupon-list" v-if="couponArr && couponArr.length > 0">
              <view
                :class="'temp-coupon-item ' + (couponCodeStatus == 2 || couponCodeStatus == 3 ? 'temp-coupon-offline' : '')"
                v-for="(item, index) in couponArr" :key="index">
                <view :class="'temp-coupon-item-left ' + ('origin' + item.couponOrigin)"
                  :style="'color:' + (item.couponOrigin == '0' ? '#ff7303' : '#FF1744') + ';background: ' + (item.couponSource == '2' ? '#ffc4bd' : '') + ';'">
                  <!-- 优惠券预览图 -->
                  <image style="width: 100%; height: 100%" v-if="'7' == item.couponType && ! isEmpty(item.pic)"
                    :src="baseurl + '/' + item.pic"></image>
                  <image style="width: 100%; height: 100%" v-else-if="'7' == item.couponType && ! isEmpty(item.picUrl)"
                    :src="baseurl + '/' + item.picUrl">
                  </image>
                  <image style="width: 100%; height: 100%" v-else-if="'7' == item.couponType"
                    src="/static/image/coupon/default_icon.png"></image>
                  <!-- <image class="temp-coupon-origin" wx:if="{{item.couponOrigin == '0'}}" src="/image/common/coupon_origin/ic_sjq.png"></image>
        <image class="temp-coupon-origin" wx:if="{{item.couponOrigin == '1'}}" src="/image/common/coupon_origin/ic_ptq.png"></image>
        <image class="temp-coupon-origin" wx:if="{{item.couponOrigin == '2'}}" src="/image/common/coupon_origin/ic_ysf.png"></image>
        <image class="temp-coupon-origin" wx:if="{{item.couponOrigin == '3'}}" src="/image/common/coupon_origin/ic_wxq.png"></image>
        <image class="temp-coupon-origin" wx:if="{{item.couponOrigin == '4'}}" src="/image/common/coupon_origin/ic_zfb.png"></image>
        <image class="temp-coupon-origin" wx:if="{{item.couponOrigin == '5'}}" src="/image/common/coupon_origin/ic_zjq.png"></image> -->
                  <!-- couponOrigin0或者空自建券(couponSource等于1是商家 2是平台) 1是微信券 2云闪付券 -->
                  <image class="temp-coupon-origin"
                    v-if="(item.couponOrigin == '0' || item.couponOrigin == '') && (item.couponSource == '1' || item.couponSource == '7')"
                    src="/static/image/common/coupon_origin/ic_sjq.png"></image>
                  <image class="temp-coupon-origin"
                    v-if="(item.couponOrigin == '0' || item.couponOrigin == '') && item.couponSource == '2'"
                    src="/static/image/common/coupon_origin/ic_ptq.png"></image>
                  <image class="temp-coupon-origin" v-if="item.couponOrigin == '1'"
                    src="/static/image/common/coupon_origin/ic_wxq.png"></image>
                  <image class="temp-coupon-origin" v-if="item.couponOrigin == '2'"
                    src="/static/image/common/coupon_origin/ic_ysf.png"></image>
                  <image class="temp-coupon-origin" v-if="item.couponOrigin == '3'"
                    src="/static/image/common/coupon_origin/ic_zfb.png"></image>
                  <image class="temp-coupon-origin" v-if="item.couponOrigin == '0' && item.couponSource == '6'"
                    src="/static/image/common/coupon_origin/ic_zjq.png"></image>
                  <view class="temp-coupon-discount-info" v-if="'7' != item.couponType">
                    <block
                      v-if="'1' == item.couponType || '3' == item.couponType || '5' == item.couponType || '6' == item.couponType">
                      <text class="temp-icon-price">￥</text>
                      <text class="temp-icon-discount" v-if="item.discountLength == 5" style="font-size: 44rpx">
                        {{ formatFenMoney(item.discountAmt) }}
                      </text>
                      <text class="temp-icon-discount" v-else-if="item.discountLength == 6" style="font-size: 36rpx">
                        {{ formatFenMoney(item.discountAmt) }}
                      </text>
                      <text class="temp-icon-discount" v-else-if="item.discountLength >= 7" style="font-size: 32rpx">
                        {{ formatFenMoney(item.discountAmt) }}
                      </text>
                      <text class="temp-icon-discount" v-else>{{ formatFenMoney(item.discountAmt) }}</text>
                    </block>
                    <block v-if="'2' == item.couponType || '4' == item.couponType">
                      <text class="temp-icon-discount">{{ item.discountAmt }}</text>
                      <text class="temp-icon-price">折</text>
                    </block>
                  </view>
                </view>

                <view class="temp-coupon-item-middle">
                  <view class="temp-coupon-tips" v-if="item.couponOrigin == '1' && item.usedTips">{{ item.usedTips }}
                  </view>
                  <view class="temp-coupon-middle-top">
                    <text class="temp-coupon-name"
                      v-if="'6' == item.couponType || '7' == item.couponType">{{ item.couponName }}</text>
                    <text class="temp-coupon-name" v-else>满{{ formatFenMoney(item.useCondAmt) }}元可用</text>
                    <text class="temp-coupon-type reduce"
                      v-if="item.couponType == '1' || '3' == item.couponType || '5' == item.couponType">满减券</text>
                    <text class="temp-coupon-type" v-if="item.couponType == '2' || '4' == item.couponType">折扣券</text>
                    <text class="temp-coupon-type reduce" v-if="'6' == item.couponType">代金券</text>
                    <text class="temp-coupon-type reduce" v-if="'7' == item.couponType">兑换券</text>
                  </view>
                  <view class="temp-coupon-middle-bottom">
                    <view v-if="item.expireDateType == 1">活动期至{{ item.expireEndTime }}</view>
                    <view v-if="item.expireDateType == 2">领取后{{ item.expireDaysNum }}天有效</view>
                  </view>
                </view>

                <block v-if="item.qrcode">
                  <view class="temp-coupon-item-right" :data-coupon="item" @tap.stop.prevent="goToCoupon">
                    <view class="temp-coupon-right-get">{{ couponCodeStatus == 1 ? '立即使用' : '查看' }}</view>
                  </view>
                </block>

                <block v-else>
                  <view class="temp-coupon-item-right" v-if="item.isFree" :data-coupon="item"
                    @tap.stop.prevent="goToCoupon">
                   
                    <view class="temp-coupon-right-get" v-if="item.isLineIssuedStamps != '1'">立即领取</view>
                    <view v-else>扫码领取</view>
                  </view>
                  <view class="temp-coupon-item-right" v-if="!item.isFree" :data-coupon="item"
                    @tap.stop.prevent="goToCoupon">
                    <view class="temp-coupon-buy-price" v-if="item.exchangeType == 1">
                      <text>{{ item.exchangePoint }}</text>
                      <text>积分</text>
                    </view>
                    <view class="temp-coupon-buy-price" v-if="item.exchangeType == 2">
                      <text>￥</text>
                      <text>{{ item.exchangePrice }}</text>
                    </view>
                    <view class="temp-coupon-buy-price temp-price-point" v-if="item.exchangeType == 3">
                      <text style="font-size: 28rpx; font-weight: 600">{{ item.exchangePoint }}</text>
                      <text style="font-size: 18rpx">积分</text>
                      <text style="font-size: 18rpx">+</text>
                      <text style="font-size: 18rpx">￥</text>
                      <text style="font-size: 28rpx; font-weight: 600">{{ item.exchangePrice }}</text>
                    </view>
                    
                    <view class="temp-coupon-right-get" v-if="item.isLineIssuedStamps != '1'">去兑换</view>
                    <view v-else>扫码领取</view>
                  </view>
                </block>
              </view>
            </view>
            <view class="temp-coupon-list" v-else>
              <view class="temp-coupon-empty">
                <image class="temp-coupon-empty-img" src="/static/image/icon_coupon_empty.png"></image>
                <text class="temp-coupon-empty-tip">暂无优惠券</text>
              </view>
            </view>
          </block>
        </view>
        <view class="coupon-list" v-else>
          <view class="coupon-empty">
            <image class="coupon-empty-img" src="/static/image/icon_coupon_empty.png"></image>
            <text class="coupon-empty-tip">暂无优惠券</text>
          </view>
        </view>
      </view>

      <view class="viewMission">
        <block v-if="viewMission">
          <image src="/static/image/view-unfinished@2x.png" style="width: 100rpx; height: 140rpx"></image>
          <text class="endTimer">浏览{{ timeCount }}秒可得奖励</text>
        </block>
        <image class="viewMission-complete" v-if="hasComplete" src="/static/image/view-complete2@2x.png"
          @tap="receivePrice"></image>
      </view>
    </view>
  </view>
</template>
<!-- <script module="util" lang="wxs" src="/utils/util.wxs"></script> -->
<script>
  import {
    http
  } from '@/utils/commonRequest.js'; // 局部引入
  const app = getApp();

  const utils = require('../../../utils/util.js');

  import {
    toCouponDetail
  } from './../../../utils/ums/toCouponDetail.js';
	import {
		staticBaseUrl
	} from '@/utils/constant.js';
	
  export default {
    data() {
      return {
				staticBaseUrl: staticBaseUrl,
        loading: true,
        baseImageUrl: app.globalData.baseImageUrl,
        baseurl: app.globalData.baseurl,
        couponArr: [],

        //浏览任务数据
        viewMission: false,
        hasComplete: false,
        dicType: '',
        dictId: '',
        taskId: '',
        timeCount: '10',
        timeOut: '',
        share: null,
        nowTime: '',
        couponCodeStatus: 0,
        couponBtnText: ''
      };
    }
    /**
     * 生命周期函数--监听页面加载
     */
    ,
    onLoad: function(options) {
      let that = this;
      this.$checkLogin().then((res) => {
        that.queryPlatCoupon();
      });

      if (options.dictId) {
        that.viewMission = options.share ? false : true
        that.dicType = options.dicType
        that.dictId = options.dictId
        that.taskId = options.taskId
        that.share = options.share
      }
    },
    onShow: function() {
      if (this.dictId && !this.share) {
        this.timeOutStart();
      }

      let nowTime = new Date().getTime();
      this.nowTime = nowTime
    },
    /** 页面隐藏 */
    onHide: function() {
      clearTimeout(this.timeOut);
    },
    /** 页面关闭 */
    onUnload: function() {
      clearTimeout(this.timeOut);
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function(options) {
      let that = this;

      if (that.dicType == undefined) {
        return;
      } else {
        that.taskAddLog();
        return {
          title: '分享测试',
          path: '/pages/coupon/couponCenter/couponCenter'
        };
      }
    },
    /** 分享 */
    onShareTimeline: function() {
      let that = this;
      console.log(that.dicType, that.dictId);

      if (that.dicType == undefined) {
        return;
      } else {
        that.taskAddLog();
        return {
          title: '分享测试',
          path: '/pages/coupon/couponCenter/couponCenter'
        };
      }
    },
    methods: {
      isEmpty(s) {
        return undefined == s || '' == s || null == s;
      },
      formatFenMoney(s) {
        if (undefined == s || '' == s || null == s) {
          return 0;
        } else {
          return (s / 100)
        }
      },
      /**
       * 查询平台优惠券（积分抢优惠模块）
       */
      queryPlatCoupon: function() {
        let that = this;
        http.get('/zsnshCoupon/getCouponList', {}).then((res) => {
          if (200 == res.data.code) {
            let couponArr = res.data.couponArr;
            couponArr.map((v) => {
              let num = v.discountAmt / 100;
              let str = num.toString();
              v.discountLength = str.length;
            }); // console.log(couponArr);

            that.couponArr = couponArr
            that.loading = false
          } else {
            that.loading = false
            console.log('积分抢优惠加载失败：', res.data.msg);
          }
        });
      },

      timeOutStart: function() {
        let that = this;
        let type = that.dicType;
        let id = that.dictId;
        let taskId = that.taskId;
        that.timeOut = setInterval(function() {
          let count = that.timeCount - 1;
          that.timeCount = count

          if (that.timeCount == 0) {
            that.viewMission = false
            that.hasComplete = true
            app.globalData.taskLog(type, id, taskId);
            clearInterval(that.timeOut);
          }
        }, 1000);
      },

      receivePrice: function() {
        uni.navigateBack({
          delta: 1
        });
      },

      taskAddLog: function() {
        let that = this;
        let type = that.dicType;
        let id = that.dictId;
        let taskId = that.taskId;
        app.globalData.taskLog(type, id, taskId, 'share');
      },

      goToCoupon: function(e) {
        toCouponDetail(e); // let coupon = e.currentTarget.dataset.coupon;
      }
    }
  };
</script>
<style>
  @import '@/templates/zsnshTemplates.css';

  page {
    background-color: #fff;
  }

  .banner-container {
    position: relative;
    width: 100%;
    height: 394rpx;
  }

  .banner {
    width: inherit;
    height: inherit;
  }

  .main-container {
    position: relative;
    top: -80rpx;
    padding: 56rpx 32rpx;
    background-color: #fff;
    border-radius: 32rpx 32rpx 0 0;
  }

  .title-container {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #999;
    margin-bottom: 36rpx;
  }

  .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #000;
    margin-right: 16rpx;
    line-height: 44rpx;
  }

  .coupon-item {
    overflow: hidden;
    display: flex;
    margin: 0 auto 24rpx;
    width: 686rpx;
    height: 156rpx;
    background: #ffffff;
    border-radius: 16rpx;
    /* background: linear-gradient(140deg, #FFEDE3 0%, #FFE0BB 100%); */
    box-shadow: 0 8rpx 20rpx 0 rgba(28, 38, 69, 0.1);
  }

  .coupon-item-left {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 156rpx;
    height: 100%;
    background: linear-gradient(131deg, #ffede3 0%, #ffe0bb 100%);
    color: #ff7303;
  }

  .coupon-discount-info {
    display: flex;
    align-items: flex-end;
    letter-spacing: -1px;
    line-height: 1;
  }

  .icon-discount {
    font-size: 58rpx;
    font-weight: bold;
    margin-right: 4rpx;
  }

  .icon-price {
    font-size: 26rpx;
  }

  .coupon-item-middle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 342rpx;
    margin: 16rpx 0;
    padding: 0 10rpx;
    border-right: 2px dashed rgba(0, 0, 0, 0.1);
  }

  .coupon-middle-top {
    display: flex;
    align-items: center;
  }

  .coupon-type {
    padding: 0 10rpx;
    line-height: 40rpx;
    background: #fd966b;
    border-radius: 18rpx;
    color: #fff;
    font-size: 20rpx;
    flex-shrink: 0;
  }

  .coupon-type.reduce {
    background: linear-gradient(143deg, #ffb4ab 0%, #ff9386 100%);
  }

  .coupon-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 10rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    letter-spacing: -1px;
  }

  .coupon-middle-bottom {
    margin-top: 10rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 24rpx;
    color: #777;
    letter-spacing: -0.5px;
  }

  .coupon-item-right {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .coupon-item-right::before {
    position: absolute;
    content: ' ';
    width: 24rpx;
    height: 12rpx;
    background-color: #f9f9f9;
    top: 0;
    left: -14rpx;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
  }

  .coupon-item-right::after {
    position: absolute;
    content: ' ';
    width: 24rpx;
    height: 12rpx;
    background-color: #f6f6f6;
    bottom: 0;
    left: -14rpx;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
  }

  .coupon-buy-price {
    color: #ff7303;
    font-size: 32rpx;
    letter-spacing: -1px;
    line-height: 44rpx;
    margin-bottom: 8rpx;
    font-weight: bold;
  }

  .price-point {
    font-size: 24rpx;
  }

  .coupon-right-get {
    width: 128rpx;
    line-height: 52rpx;
    text-align: center;
    color: #fff;
    font-size: 24rpx;
    background: linear-gradient(140deg, #ffc996 0%, #fc4c2c 100%);
    box-shadow: 0px 4rpx 8rpx 0px rgba(253, 96, 61, 0.22);
    border-radius: 26rpx;
  }

  .coupon-empty {
    width: 100%;
    margin-top: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .coupon-empty-img {
    width: 644rpx;
    height: 310rpx;
  }

  .coupon-empty-tip {
    font-size: 28rpx;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 300;
    color: #666666;
    line-height: 40rpx;
    margin-top: 44rpx;
  }

  .viewMission {
    position: fixed;
    right: 24rpx;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    /* zoom: .6; */
  }

  .viewMission-complete {
    width: 100rpx;
    height: 140rpx;
    /* zoom: 0.6; */
  }

  .endTimer {
    display: inline-block;
    width: 54rpx;
    height: 56rpx;
    /* line-height: 20rpx; */
    font-size: 12rpx;
    font-weight: 500;
    color: #fff;
    position: absolute;
    top: 70rpx;
    left: 24rpx;
    text-align: center;
    padding-top: 4rpx;
  }

  /* 优惠券为已过期或者已使用状态 */
  .coupon-offline .coupon-item-left,
  .coupon-offline .coupon-type,
  .coupon-offline .coupon-right-get {
    background: #ccc;
    box-shadow: none;
  }

  /* 如果是满减券 */
  .red-color {
    background: linear-gradient(138deg, #ffe7e4 0%, #ffc4bd 100%) !important;
  }

  .red-color .coupon-item-left {
    background: linear-gradient(140deg, #ffe7e4 0%, #ffc4bd 100%);
  }

  .red-color .coupon-item-left {
    color: #ff262e;
  }

  .red-color .coupon-buy-price {
    color: #ff262e;
  }
  
</style>
